如何让 GitHub Pages 中通过 Markdown 编辑的博客支持 Mermaid？

您所在的位置：网站首页 › github pages 怎么用 › 如何让 GitHub Pages 中通过 Markdown 编辑的博客支持 Mermaid？

如何让 GitHub Pages 中通过 Markdown 编辑的博客支持 Mermaid？

2023-03-09 08:42| 来源: 网络整理| 查看: 265

最近在研究通过文本和代码创建图标和可视化，Mermaid功能比较丰富，Web支持也比较友好。如何让GitHub Pages中通过Markdown编辑的博客也支持Mermaid呢？

完整示例 graph LR A--;B import mermaid from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'; mermaid.initialize({ startOnLoad: false }); await mermaid.run({ querySelector: '.language-mermaid', }); 复制代码 graph LR A-->B GitHub Pages

通过Markdown编辑的博客中：

```mermaid graph LR A-->B ``` 复制代码

然后在全局脚本模板底部添加以下内容：

import mermaid from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'; mermaid.initialize({ startOnLoad: false }); await mermaid.run({ querySelector: '.language-mermaid', }); 复制代码参考文档 Mermaid Usage How to make GitHub Pages Markdown support mermaid diagram? jeffreytse/jekyll-spaceship PlantUML D2 Tour

欢迎关注我的微信公众号：乘风破浪的Coder

【本文地址】

如何让 GitHub Pages 中通过 Markdown 编辑的博客支持 Mermaid？

如何让 GitHub Pages 中通过 Markdown 编辑的博客支持 Mermaid？

今日新闻

推荐新闻